<template>
  <div class="tool">
    <div class="me_tool">
      <div>我的工具</div>
    </div>

    <div class="tool_item">
      <tool-item1></tool-item1>
      <tool-item2></tool-item2>
      <tool-item3></tool-item3>
    </div>
  </div>
</template>

<script>
import ToolItem1 from "./ToolItem1.vue";
import ToolItem2 from "./ToolItem2.vue";
import ToolItem3 from "./ToolItem3.vue";
export default {
  name: "Tool",
  components: {
    ToolItem1,
    ToolItem2,
    ToolItem3,
  },
};
</script>

<style scoped>
.tool {
  width: 96%;
  height: 45vh;
  background: url("../../../assets/img/regisetr/login2.jpg");
  background-size: cover;
  margin: 3%;
  position: relative;
  border: 3px solid seashell;

}

.me_tool {
  height: 13%;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #f9f9f9;
  background: url("../../../assets/img/regisetr/login2.jpg");
  background-size: cover;
  font-weight: bold;
  color: #000;

}

.me_tool div {
  width: 20%;
  margin-left: 3%;
  margin-top: 2.5%;
}
.tool_item {
  width: 100%;
  height: 87%;
}
</style>
